import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { Checkbox } from 'antd';
import { WeaLocaleProvider, WeaNewScroll, WeaHelpfulTip } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('portalThemeStore')
@observer
class E9QuickSearchRcmd extends React.Component {
  constructor(props) {
    super(props);
    this.onScroll = this.onScroll.bind(this);
    this.onMenuClick = this.onMenuClick.bind(this);
    this.onRcmdClick = this.onRcmdClick.bind(this);
    this.onClose = this.onClose.bind(this);
  }

  componentDidMount() {
    const $input = jQuery('#e9header-quick-search-input');
    $input.unbind('keydown');
    $input.keydown((e) => {
      e = e || window.event;
      switch (e.keyCode) {
        case 38: {
          const $li = jQuery('.e9header-quick-search-rcmd-li');
          const $activeli = jQuery('.e9header-quick-search-rcmd-li.active');
          const $prevli = $activeli.prev();
          if ($activeli.length && $prevli.length) {
            const index = $prevli.index();
            this.refs.scroll.scroll(index * 35);
            $li.removeClass('active');
            $prevli.addClass('active');
          } else {
            // const value = $input.val();
            // $input.val('').focus().val(value);
          }
          break;
        }
        case 40: {
          // $input.blur();
          const $li = jQuery('.e9header-quick-search-rcmd-li');
          const $activeli = jQuery('.e9header-quick-search-rcmd-li.active');
          if ($activeli.length) {
            const $nextli = $activeli.next();
            if ($nextli.length) {
              const index = $nextli.index();
              if (index >= 3) {
                this.refs.scroll.scroll(index * 35);
              }
              $li.removeClass('active');
              $nextli.addClass('active');
            }
          } else {
            $li.eq(0).addClass('active');
          }
          break;
        }
        case 13: {
          const $li = jQuery('.e9header-quick-search-rcmd-li');
          const $activeli = jQuery('.e9header-quick-search-rcmd-li.active');
          if ($activeli.length) {
            $activeli.click();
            // 点击后重置
            $li.removeClass('active');
            this.refs.scroll.scroll(0);
          } else {
            this.props.onTypeSearch();
          }
        }
      }
    });
  }

  render() {
    const { portalThemeStore } = this.props;
    const { quickSearchMenus, quickSearchAssociate } = portalThemeStore;
    const _quickSearchMenus = toJS(quickSearchMenus);
    const _quickSearchAssociate = toJS(quickSearchAssociate);
    const hasMenus = _quickSearchMenus && _quickSearchMenus.length;
    const hasAssociate = _quickSearchAssociate && _quickSearchAssociate.length;

    return (
      <div className="e9header-quick-search-rcmd-content">
        <div className="e9header-quick-search-rcmd-result">
          {hasMenus || hasAssociate ? (
            <div ref="title" className="e9header-quick-search-rcmd-title">
              {hasMenus ? getLabel(23036, '菜单') : getLabel(385782, '大家都在找')}
            </div>
          ) : null}
          <WeaNewScroll ecId={`${(this && this.props && this.props.ecId) || ''}_WeaNewScroll@0pzqbs`} ref="scroll" height="100%" onScroll={this.onScroll}>
            <div className="e9header-quick-search-rcmd-list">
              {hasMenus ? (
                <ul className="e9header-quick-search-rcmd-ul">
                  {_quickSearchMenus.map((item, index) => {
                    const { moduleId, name } = item;
                    return (
                      <li key={index} className="e9header-quick-search-rcmd-li" title={name} onClick={() => this.onMenuClick(item)}>
                        <div className={`e9header-quick-search-rcmd-icon e9header-top-menu-color${Math.abs(parseInt(moduleId, 10)) & 7}`}>
                          <i className={`wevicon-top-menu-default wevicon-top-menu-${moduleId}`} />
                        </div>
                        <span>{name}</span>
                      </li>
                    );
                  })}
                </ul>
              ) : null}
              <div ref="wsrcmd" />
              {hasMenus && hasAssociate ? <div className="e9header-quick-search-rcmd-title">{getLabel(385782, '大家都在找')}</div> : ''}
              {hasAssociate ? (
                <ul className="e9header-quick-search-rcmd-ul">
                  {_quickSearchAssociate.map((item, index) => (
                    <li key={index} className="e9header-quick-search-rcmd-li" title={item} onClick={() => this.onRcmdClick(item)}>
                      {item}
                    </li>
                  ))}
                </ul>
              ) : null}
            </div>
          </WeaNewScroll>
        </div>
        <div className="e9header-quick-search-rcmd-result">
          <div className="e9header-quick-search-rcmd-title">{getLabel(385801, '搜索建议')}</div>
          <div className="e9header-quick-search-rcmd-search" onClick={this.props.onTypeSearch}>
            <i className="icon-coms-search" />
            <span>{getLabel(385802, '查看系统内容搜索结果')}</span>
            <i className="icon-coms-Right" />
          </div>
        </div>
        <div className="e9header-quick-search-rcmd-tip">
          <Checkbox ecId={`${(this && this.props && this.props.ecId) || ''}_Checkbox@zkcj5o`} onChange={this.onClose}>
            {getLabel(385803, '下次不再显示')}
          </Checkbox>
          <WeaHelpfulTip
            ecId={`${(this && this.props && this.props.ecId) || ''}_WeaHelpfulTip@xbkhga`}
            title={getLabel(385804, '关闭后可在个性化设置中再次打开本功能')}
          />
        </div>
      </div>
    );
  }

  onScroll() {
    const $title = jQuery(this.refs.title);
    const $wsrcmd = jQuery(this.refs.wsrcmd);
    const top = $wsrcmd.position().top;
    if (top <= 0) {
      $title.html(getLabel(385782, '大家都在找'));
    } else {
      $title.html(getLabel(23036, '菜单'));
    }
  }

  onMenuClick(item) {
    this.props.onVisibleChange(false);

    const { portalThemeStore } = this.props;
    const { moduleId, moduleName, infoId, mobxrouteurl, target } = item;
    if (target == 'mainFrame') {
      portalThemeStore.onTopMenuSelectedChange({ id: moduleId, name: moduleName }, infoId, mobxrouteurl);
    }
    portalThemeStore.onLoadMain(item);

    // 点击后重置
    const $li = jQuery('.e9header-quick-search-rcmd-li');
    $li.removeClass('active');
    this.refs.scroll.scroll(0);
  }

  onRcmdClick(value) {
    this.props.onVisibleChange(false);

    const { portalThemeStore } = this.props;
    portalThemeStore.onQuickSearch({ from: 'theme', type: '9', value });
  }

  onClose(e) {
    this.props.onVisibleChange(false);

    const { portalThemeStore } = this.props;
    portalThemeStore.setQuickSearchShowRcmd(e.target.checked ? '0' : '1');
  }
}

export default E9QuickSearchRcmd;
